<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的商店</title>
    <%@include file="common/commonsourcemytest.jsp" %>
    <%--放在bootstrap下面？？？【有用了吗？？？】--%>
    <%@include file="common/common.jsp" %>
    <%@include file="common/commonpaginator.jsp" %>
    <%--jsp那个文件不需要了。因为我要用。直接页面内声明。--%>
    <%--这个是我的分页JS代码。【？】--%>

    <%--<script src="${pageContext.request.contextPath}/static/js/source1paging.js" charset="utf-8"></script>--%>
    <%--用不着。没用？【分页的？】--%>

    <script src="${pageContext.request.contextPath}/static/js/my1mystore.js" charset="utf-8"></script>
    <%--把JS放在里面，写在HTML外面。--%>
    <%--vue--%>
    <%@include file="common/commonvue.jsp" %>


    <%--这里错了。。。--%>
    <%--<script src="${pageContext.request.contextPath}/static/css/my2mystore.css"></script>--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/my2mystore.css">
</head>
<body>
<%--模态框。推广使用？【？】点到面？（目标。）--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <%--这是关闭按钮X--%>
                <h4 class="modal-title" id="myModalLabel">宠物详情</h4>
            </div>

            <div class="modal-body" id="vue2">
                <%--<div id="ii">${mypetshowlist.get(0).petid}</div>--%>
                <%--这里报了一个错。--%>
                <%--java.lang.IndexOutOfBoundsException: Index 0 out of bounds for length 0--%>
                <%--后台传来了空值？？【没有自己的宠物？】【】--%>
                <%--解决。【bug？？】--%>

                <%--<div>${mypetshowlist.get(0).petid}</div>--%>
                <%--有用吗？？？？--%>
                <%--美化表格。如果有那个的话。而不要空指针？？？todo  --%>

                哈哈
                {{mypetshow.petid}}<%--可以输出吗？--%>
                行哈
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<span id="userid">欢迎你，${userid}</span><br>
<span id="storeid">店名：${storeid}</span>


<%--这个模板是上面那个的包装，顶部添加按钮。批量删除。。。？？【？？】--%>

<%--Vue推广，点到面。【。】--%>
<div id="vue1">
    <%--window.open('','_self');
    window.opener=null;--%>

    <div>
        <%--居中div--%>
        <%--position: fixed;不要？如何防止覆盖？float: right.. style="text-align: center;"--%>

        <button style="float: right;" class="layui-btn"
                onclick="WeAdminShow('发布宠物','http://localhost:8080/Github_war_exploded/pet/petrelease?userid=${userid}')">
            <i class="layui-icon"></i>发布宠物
        </button>

        <button style="float: right;" class="layui-btn layui-btn-danger">
            <i class="layui-icon"></i>批量删除
        </button>
        <%--todo    问题，这个不可以关闭窗口，并刷新当前页面？？？【？】【如何？？】【调用的一个JS】【只能自己关闭？？或者用模态框？？？】--%>
        <%--仿制源代码即可？？【？？？】--%>
    </div>
    <br>


    <%--目录。--%>

    <div>
        <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i>
        </div>
        <span>序号</span>
        <span>宠物id</span>
        <span>宠物名称</span>
        <span>宠物照片</span>
        <span>宠物性别</span>
        <span>宠物年龄</span>
        <span>宠物健康</span>
        <span>宠物类别</span>
        <span>发布时间</span>
        <span>宠物是否已售出</span>
        <%--问题：售出后，修改，会级联？还是没反应？【bug？？没事？宠物id不变即可。那是不会变的？】--%>
        <span style="color: red">宠物价格</span>
        <span>操作</span>
        <div style="margin-top: 10px" class="input-group">
            <%--div class="layui-row"--%>
            <form class="layui-form layui-col-md12 we-search" action="#" method="post" name="mainbox_form">
                <div class="layui-inline">
                    <input type="text" class="layui-input" placeholder="宠物ID" name="petid">
                </div>
                <div class="layui-inline">
                    <input placeholder="宠物名字" class="layui-input" type="text" name="petname"
                           required="required"/>
                </div>

                <div class="layui-inline">
                    <input type="radio" name="gender" value="1"/>公
                    <input type="radio" name="gender" value="0"/>母
                    <%--为什么不是true和flase？？？【？？？】--%>
                </div>


                <div class="layui-inline">
                    <input placeholder="宠物年龄" class="layui-input" type="text" name="age" required="required"/>
                </div>


                <div class="layui-inline">
                    <input placeholder="宠物种类" type="text" class="layui-input" name="species"/>
                    <%--这是什么样式？？？--%>
                    <select style="width: 100px" class="input-group-addon" id="select"
                            onchange="changespecies()"><%--这个不加name即可？？？--%>
                        <%--这个赋予一个方法。改变时改变。--%>

                        <%--加上name才可以被后面的识别表单的代码识别？表单自动代码可以扩展？通用？--%>
                        <c:forEach items="${specieslist}" var="specieslist" varStatus="i">
                            <option value="${specieslist}">${specieslist}</option>
                        </c:forEach>
                        <%--问题？--%>
                    </select>
                </div>

                <div class="layui-inline">
                    <input placeholder="金额" class="layui-input" type="text" name="money"/>
                </div>


                <button type="button" style="float: right" class="layui-btn" onclick="searchby()"><i class="layui-icon"></i>
                </button>
            </form>
        </div>
    </div>

    <%--代替table没问题。--%>
    <%--换行包裹div？？才行？？--%>
    <div style="text-align: center;">
        <ul id="petlist">
            <li v-for="(mypetshow,index) in mypetshowlist" onclick="showall(this)">
                <div style="float: right;" class="layui-unselect layui-form-checkbox" lay-skin="primary"
                     data-id="2">
                    <i class="layui-icon"></i>
                </div>
                <img v-bind:src="mypetshow.petdetails.petphotopath"
                     v-bind:alt="mypetshow.petdetails.petphotopath">
                <p id="petid">{{mypetshow.petid}}</p>
                <p>{{mypetshow.petdetails.petname}}</p>

                <p>{{mypetshow.petdetails.gender}}</p>
                <%--这个怎么写。--%>

                <p>{{mypetshow.petdetails.age}}</p>
                <p>{{mypetshow.petdetails.health}}</p>
                <p>{{mypetshow.petdetails.species}}</p>
                <p>{{mypetshow.petrelease.releasetime}}</p>
                <p>{{mypetshow.pettrading.flag}}</p>

                <p style="color: red">{{mypetshow.pettrading.money}}</p>

                <p class="td-manage"><%--管理的。--%>
                    <a data-toggle="modal" data-target="#myModal" onclick="datainput(index)" title="详细">
                        <i class="layui-icon"></i>
                    </a>


                    <a title="修改"
                       onclick="modifypage(this)"
                       href="javascript:;">
                        <i class="layui-icon"></i><%--图标。【？】--%>
                    </a>



                    <a title="删除" onclick="deleteitem(this)" href="javascript:;">
                        <i class="layui-icon"></i>
                    </a>

                </p>
            </li>
        </ul>
    </div>
    <div style="position:static;float:none;clear:both;text-align: center;">
        <a style="float: left" href="javascript:window.location.reload();">
            <i class="icon-refresh"></i>
        </a>
        <span class="fr" style="line-height:40px;float: left">共有数据： {{total}}条</span>
        <div style="margin:0 auto;text-align: center" class="btn-group btn-group-justified" id="paginator"></div>
    </div>
</div>
</body>
</html>